<template>
	<div class="home">
		<router-view></router-view>
		<div class="bottom_div">
			<div class="tab_div" v-for="(item,index) in tablist" @click="change(index)">
				<router-link :to="item.to">
					<img :src="index==selected? item.activeurl :item.url " />
					<p :class="{color_active:index==selected}">{{item.text}}</p>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						url: require("../assets/home/tab_home.png"),
						activeurl: require("../assets/home/tab_home_active.png"),
						text: "首页",
						to: "/home"
					},
					{
						url: require("../assets/home/tab_shopcart.png"),
						activeurl: require("../assets/home/tab_shopcart_active.png"),
						text: "购物车",
						to: "/home/cart"
					},
					{
						url: require("../assets/home/tab_orders.png"),
						activeurl: require("../assets/home/tab_orders_active.png"),
						text: "订单",
						to: "/home/order"
					},
					{
						url: require("../assets/home/tab_mine.png"),
						activeurl: require("../assets/home/tab_mine_active.png"),
						text: "我的",
						to: "/home/mine"
					}
				],
				selected: 0
			}
		},
		methods: {
			change(index) {
				this.selected = index
			}
		}
	}
</script>
<style scoped>
	.bottom_div {
		background-color: #f1f1f1;
		height: 49px;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.bottom_div .tab_div {
		text-align: center;
		flex: 1;
	}

	.bottom_div .tab_div img {
		height: 20px;
		width: 20px;
	}

	.bottom_div .tab_div p {
		font-size: 10px;
		color: #333333;
	}

	.bottom_div .tab_div .color_active {
		color: #0091FF;
	}
</style>
